<template>
  <div style="display:  inline-block; white-space: nowrap; overflow: hidden; ">
    <el-text class="text" style="width: 139px;">
      {{ xueYe.xianXueMa?.substring(0, 5) }}<el-text style="padding-left: 3px; ">
        {{ xueYe.xianXueMa?.substring(5, 7) }}
      </el-text>
      <el-text style="font-size: medium; font-weight: bold; padding: 0px 5px;">
        {{ xueYe.xianXueMa?.substring(7, 13) }}
      </el-text>{{ xueYe.xianXueMa?.substring(13) }}
    </el-text>
    <el-divider direction="vertical" />
    <el-text style="display: inline-block; width: 70px; ">
      {{ xueYe.chanPinId }}
    </el-text>
    <el-divider direction="vertical" />
    <el-text class="text" style="font-size: medium; font-weight: bold; display: inline-block; min-width: 120px;  ">
      <el-popover title="血袋信息" trigger="click" :width="400">
        <template #reference>
          {{ xueYe.mingCheng }}
        </template>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="献血码">
            {{ xueYe.xianXueMa?.substring(0, 5) }} {{ xueYe.xianXueMa?.substring(5, 7) }}
            <span style="font-size: medium; font-weight: bold;">{{ xueYe.xianXueMa?.substring(7, 13) }}</span>
            {{ xueYe.xianXueMa?.substring(13) }}
          </el-descriptions-item>
          <el-descriptions-item label="产品码"> {{ xueYe.chanPinId }} </el-descriptions-item>
          <el-descriptions-item label="名称"> {{ xueYe.mingCheng }} </el-descriptions-item>
          <el-descriptions-item label="血型">
            <span v-if="xueYe.rhD == '-'" style="">
              <span class="hollow-text"> {{ xueYe.abo }} </span>
              <span class="rhd-yingxing"> Rh(D)阴性 </span>
            </span>
            <span v-else>
              <span style="font-size: 20px;"> {{ xueYe.abo }} </span>
              &nbsp; Rh(D) {{ xueYe.rhD }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="规格"> {{ xueYe.rongLiang }}{{ xueYe.danWei }} </el-descriptions-item>
          <el-descriptions-item label="失效时间"> {{ xueYe.shiXiaoShiJian }} </el-descriptions-item>
        </el-descriptions>
      </el-popover>
    </el-text>
    <el-divider direction="vertical" />
    <!-- 根据 WS/T 789—2021 血液产品标签与标识代码标准 
     血型文本ABO及Rh(D)应使用大字体突出显示，且ABO字体应大于Rh(D)字体。
     如果Rh(D)为阴性，ABO文本宜采用白底黑色边框线（即：镂空字体），Rh(D)文本宜采用黑底白字（即：反显），以便能够醒目区分血液的Rh(D)血型。 显示文本: Rh(D)阴性
    -->
    <view v-if="xueYe.rhD == '-'" style="background-color: white;">
      <el-text class="hollow-text"> {{ xueYe.abo }} </el-text>
      <el-text class="rhd-yingxing"> Rh(D)阴性 </el-text>
    </view>
    <view v-else>
      <el-text :class="classABO"> {{ xueYe.abo }} </el-text>
      <el-text> &nbsp; {{ xueYe.rhD ? 'Rh(D)' + xueYe.rhD : '' }}</el-text>
    </view>
    <el-divider direction="vertical" />
    <el-text style=""> {{ xueYe.rongLiang }}{{ xueYe.danWei }}</el-text>
    <el-divider direction="vertical" />
    <el-text class="text"> {{ timeFormat(xueYe.shiXiaoShiJian) }}</el-text>
  </div>
</template>

<script lang='ts' setup>
// 血液信息显示组件
import { timeFormat } from '/@/utils'
defineOptions({
  name: 'MkTextXueYe'
})

const props = defineProps({
  xueYe: {
    type: Object as () => XueYeType,
    default: {} as XueYeType,
  },
})

const classABO = computed(() => {
  switch (props.xueYe.abo) {
    case 'A':
      return 'classA'
    case 'B':
      return 'classB'
    case 'AB':
      return 'classAB'
    case 'O':
      return 'classO'
    default:
      return ''
  }
})

</script>

<style lang='scss' scoped>
.classA {
  font-size: 22px;
  font-weight: bold;
  color: blue;
}

.classB {
  font-size: 22px;
  font-weight: bold;
  color: orange;
}

.classO {
  font-size: 22px;
  font-weight: bold;
}

.classAB {
  font-size: 22px;
  font-weight: bold;
  color: red;
}

.hollow-text {
  font-size: 22px;
  font-weight: bold;
  color: white;
  padding-right: 5px;
  /* 以下是创建镂空效果的边框样式 */
  -webkit-text-stroke: 2px black;
  /* 为文本添加黑色边框 */
  text-stroke: 21px black;
}

.rhd-yingxing {
  font-size: 20px;
  color: white;
  background-color: black;
}

.text {
  white-space: nowrap;
  display: inline-block;
}
</style>
